<template>
  <div>
    <div>
      <headerNavigation></headerNavigation>
      <!-- 标签导航区 -->
      <div class="main-navigation">
        <button class="navigation-abel1">
          <i class="iconfont icon-shouye-copy"></i>
          首页
        </button>
        <i class="iconfont icon-right-1-copy"></i>
        <button class="navigation-abel">班级</button>
        <i class="iconfont icon-right-1-copy"></i>
        <button class="navigation-abel">
          {{ stuMessage.stuName }}的成长报告
        </button>
      </div>
      <!--这里是隐藏的菜单项-->
      <el-collapse class="honor-container">
        <el-collapse-item>
          <template slot="title" class="honor-name">
            <div>
              <img
                :src="`${src1 + stuMessage.avatar}`"
                style="width: 4rem; height: 4rem; border-radius: 50%"
                v-if="stuMessage.avatar != ''"
              />
              <img
                src="@/assets/images/boy.png"
                style="width: 4rem; height: 4rem; border-radius: 50%"
                v-if="stuMessage.sex == 0 && stuMessage.avatar == ''"
              />
              <img
                src="@/assets/images/girl.png"
                style="width: 4rem; height: 4rem; border-radius: 50%"
                v-if="stuMessage.sex == 1 && stuMessage.avatar == ''"
              />
            </div>
            <div class="template-right">
              <div class="right-top">{{ stuMessage.stuName }}</div>
              <img
                v-if="stuMessage.sex === '0'"
                class="gander"
                src="./images/nanhai1.png"
              />
              <img
                v-if="stuMessage.sex === '1'"
                class="gander"
                src="./images/nvhai1.png"
              />
            </div>
          </template>
          <div class="Information">
            <div></div>
            <!--这是存放左边的年级和家长姓名的盒子-->
            <div class="weizhi">
              <div class="hezi3">
                <div class="box1">
                  <div class="Information-name">班级</div>
                  <div style="margin-left: 200px">{{ stuList.班级 }}</div>
                </div>
                <div class="box1">
                  <div class="Information-name" style="margin-top: 10px">
                    家长姓名
                  </div>
                  <div class="name1" style="margin-left: 180px">
                    {{ stuList.nick_name }}
                  </div>
                </div>
              </div>
            </div>
            <!--这是存放中间的年级和家长姓名的盒子-->
            <div class="weizhi3">
              <div class="person1">个人信息</div>
              <div class="box1">
                <div class="Information-name" style="margin-top: 10px">
                  手机号
                </div>
                <div class="name1" style="margin-left: 180px">
                  {{ stuList.phonenumber }}
                </div>
              </div>
            </div>
            <!--这是存放右边的年级和家长姓名的盒子-->
            <div class="weizhi2">
              <div class="box1">
                <div class="Information-name">身份证</div>
                <div style="margin-left: 200px">{{ stuMessage.idCard }}</div>
              </div>
              <div class="box1">
                <div class="Information-name" style="margin-top: 10px">
                  家长身份
                </div>
                <div class="name1" style="margin-left: 180px">
                  {{ stuList.relation }}
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 总的成长报告的盒子 -->
    <div class="Box">
      <!-- 制作中的成长报告 -->
      <div class="report1" :key="index" v-for="(item, index) in reportListmake">
        <div class="box" @click="goMake(item)">
          <div class="word">
            <div class="word1">
              <span class="year">{{ item.semesterName }}</span>
            </div>
          </div>
          <div class="photo">
            <div class="photo1">
              <img src="@/assets/images/growReport.jpg" />
              <div class="state">
                <span class="state1">制作中</span>
              </div>
              <div class="Info">
                <span class="name">{{ item.stuName }} </span>
                <span class="lesson">{{ item.gradeId }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 已完成的成长报告 -->
      <div
        class="report1"
        v-for="(item, index) in reportListfinish"
        :key="index"
      >
        <div class="box" @click="goDefine(item)">
          <div class="word">
            <div class="word1">
              <span class="year">{{ item.semesterName }}</span>
            </div>
          </div>
          <div class="photo">
            <div class="photo1">
              <img src="@/assets/images/growReport.jpg" />
              <div class="state">
                <span class="state1">已定稿</span>
              </div>
              <div class="Info">
                <span class="name">{{ item.stuName }} </span>
                <span class="lesson">{{ item.gradeId }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerNavigation></footerNavigation>
  </div>
</template>
<script>
import module from "@/allurlimg/img";
import headerNavigation from "@/views/components/background/headerNavigation2";
import footerNavigation from "@/views/components/background/footerNavigation";
import childNavigation from "@/views/components/background/childNavigation";

import {
  getRport,
  getGradeId,
  getstudentImation,
  getclassId,
} from "@/api/luoc.api/luo4.js";

export default {
  data() {
    return {
      src1: "",
      stuId: "",
      reportList: [],
      localhostList: [],
      reportListmake: [],
      reportListfinish: [],
      studentId: [],
      gradeId: "",
      data: [],
      //学生列表

      stuList: [],
      stuLiast: [],
      gradeList: [],
      stuId: window.location.search.substring(4),
    };
  },
  onLoad(option) {
    id: option.id;
    this.stuId = id;
  },
  components: {
    childNavigation,
    headerNavigation,
    footerNavigation,
  },
  methods: {
    mounted() {
    window.onbeforeunload = function (e) { 
    var storage = window.localStorage; 
    storage.clear() 
    }
    },
    //跳转路由
    goDefine(e) {
      console.log(e)
      this.$router.push({

        name: "definerenke",
        params: {
          studentId: e.studentId,
          growthId: e.growthId,
          semesterName: e.semesterName,
          stuName: this.stuMessage.stuName,
        },
      });
    },
    goMake(e) {
      console.log(e)
      this.$router.push({
        name: "makerenke",
        params: {
          studentId: e.stuId,
          growthId: e.growthId,
          semesterName: e.semesterName,
          stuName: this.stuMessage.stuName,
        },
      });
    },
    async gets() {
      this.stuMessage = JSON.parse(localStorage.getItem("stuMessage"));
      const res = await getRport({ stuId: this.stuMessage.stuId });
      console.log(res.data, "reportList");
      // 0 1 制作中 2 定稿
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i]["status"] == 2) {
          this.reportListfinish.push(res.data[i]);
        } else {
          this.reportListmake.push(res.data[i]);
        }
      }
      // this.reportListmake=this.reportList[0]
      // this.reportListfinish=this.reportList.splice(1)
      // console.log(this.reportListmake, 'this.reportListmake')
    },

    async getGradeId() {
      const res = await getGradeId({});
      this.gradeList = res.data;
    },

    //以下是需要gradeId的值才可进行获取数据，具体的gradeId还得先再去获取postId
    async getclassStudents() {
      const res = await getstudentImation({ gradeId: this.gradeId });
      // const res = await getstudentImation({ gradeId: 202201 });
      this.stuLiast = res.rows[0].stuName;
      this.studentId = res.rows;
    },

    async getthisclassId() {
      if (this.stuMessage.stuId !== undefined) {
        const res = await getclassId(this.stuMessage.stuId);
        this.stuList = res.data;
        this.xueshengName = this.stuMessage.stuName;
      }
    },
  },
  //页面挂载时钩子
  created() {
    this.src1 = module.host;
    this.stuList = JSON.parse(localStorage.getItem("stuList"));
    this.stuMessage = JSON.parse(localStorage.getItem("stuMessage"));
    this.localhostList = JSON.parse(localStorage.getItem("localhostList"));

    this.stuMessage = this.$route.query.stuMessage;
    this.stuId = this.stuMessage.stuId;

    this.getthisclassId();
    this.gets();
    // this.getGradeId();
    // this.getclassStudents();
  },
};
</script>


<style scoped>
/*包含全部报告的内容区*/
.Box {
  display: flex;
  margin: 0rem 13.75rem 0rem 10.875rem;
  width: 68.75rem;
  flex-wrap: wrap;
}
/*内容区域的盒子 */
.box {
  display: flex;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 0.625rem;
  width: 100%;
  height: 25rem;
}
.report1 {
  margin: 2.8125rem 0rem 0rem 2.75rem;
  height: 20rem;
  width: 17.5rem;
}
.icon {
  height: 6.25rem;
  margin-top: 1rem;
  margin-left: 68.75rem;
}

/*孩子姓名导航*/
/* 头部导航区内容 */
.header1 {
  position: relative;
  height: 3.125rem;
  margin: 0rem 14.375rem 0rem 14.375rem;
}

/* 导航区 */
.header-navigation1 {
  position: absolute;
  left: 0;
}

/* 标签导航区 */
.navigation-ecah1 {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.25rem 0rem 0 1.25rem;
  background: #ffffff;
}

.show {
  color: #7c0000;
  padding-bottom: 0.3125rem;
  border-bottom: 0.1875rem solid #7c0000;
}

/*一个成长报告*/
/*文字背景框*/
.word {
  height: 18.75rem;
  width: 2.625rem;
  background: #f5f5f5;
}
/*文字框*/
.word1 {
  display: flex;
  width: 1.625rem;
  line-height: 1.875rem;
  margin-left: 0.3125rem;
  margin-right: 0.8125rem;
  text-align: center;
}
/*文字*/
.year {
  margin-top: 0.625rem;
  font-size: 1rem;
  color: #7c0000;
  writing-mode: vertical-lr; /* 文字垂直展示 */
  text-orientation: upright; /* 数字垂直展示 */
  text-align: center; /* 字题上下居中 */
  letter-spacing: 1.25rem; /* 字间距 */
}
/*照片框*/
.photo {
  border: 0.0625rem solid #7c0000;
  border-style: dashed;
  height: 18.5rem;
  width: 13.5625rem;
  margin-left: 1.0625rem;
}
/*包括学期和成长报告的盒子*/
.box {
  display: flex;
  width: 26%;
  position: relative;
}
/*成长报告封面照片*/
.photo img {
  height: 18.375rem;
  width: 13.4375rem;
}
/*完成状态*/
.state {
  background: #f2e5e5;
  border-radius: 0.25rem;
  width: 3.625rem;
  height: 1.5625rem;
  text-align: center;
  position: absolute;
  z-index: 2;
  top: 8.9375rem;
  right: 0.875rem;
}
/*文字制作中*/
.state1 {
  font-size: 0.875rem;
  line-height: 1.5625rem;
}
/*包成长报告和里面文字的盒子 */
.photo1 {
  position: relative;
}
/*学生信息*/
.photo1 .Info {
  position: absolute;
  bottom: 3.125rem;
  right: 1.25rem;
  width: 2.5rem;
  flex-wrap: wrap;
}
.name {
  font-size: 0.25rem;
  width: 60%;
}
.lesson {
  display: flex;
  font-size: 0.25rem;
  width: 12.5rem;
}

/*实现点击滑动功能 */
.el-carousel__item h3 {
  color: #ffffff;
  font-size: 1.125rem;
  opacity: 0.75;
  line-height: 18.75rem;
  margin: 0rem;
  width: 58.75rem;
  height: 56.25rem;
}

.el-carousel__item:nth-child(2n) {
  display: flex;
  background-color: #ffffff;
  width: 58.75rem;
  height: 43.75rem;
  flex-wrap: wrap;
}

.gander {
  height: 1.875rem;
  width: 4.375rem;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
  height: 43.75rem;
  display: flex;
  flex-wrap: wrap;
}

.lunbo {
  width: 62.5rem;
  height: 43.75rem;
  margin-left: 6.25rem;
  text-align: center;
  margin-top: 1.25rem;
}

.el-carousel__arrow {
  top: 125%;
}

.honor-container {
  display: flex;
  margin: 3.125rem 14.375rem;
}

.honor-name {
  display: flex;
  flex-direction: row;
}

.el-collapse-item {
  width: 100%;
}
.el-collapse-item__header {
  height: 100px;
}

.template-left {
  width: 5rem;
  height: 5rem;
  display: flex;
  margin: 0.625rem;
  border-radius: 50%;
}
.template-right {
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  margin: 0.625rem;
}

.Information {
  display: flex;
  flex-direction: row;
  margin-top: 1.25rem;
  font-weight: bold;
  font-size: 0.9375rem;
}

.Information-name1 {
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 1.25rem;
}

.weizhi {
  position: relative;
  flex-direction: row;
  text-align: left;
}

.weizhi2 {
  margin-left: 12.5rem;
  position: relative;
  text-align: right;
}

.weizhi3 {
  margin-left: 12.5rem;
  position: relative;
  text-align: center;
}

.hezi3 {
  position: relative;
}

.box1 {
  display: flex;
  margin-top: 1.25rem;
}

.name1 {
  margin-top: 0.625rem;
}

.person1 {
  font-size: 1.5625rem;
}
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 28.125rem 0 28.125rem;
  flex-direction: row;
}
.icon-shouye-copy {
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: 0.1875rem;
}
.icon-right-1-copy {
  color: darkgray;
  font-size: 1.5625rem;
  padding: 0.4375rem;
}
.navigation-abel1 {
  width: 6.25rem;
  border-radius: 1.5625rem;
  border: 0rem;
  padding: 0.625rem;
  line-height: 0.9375rem;
  font-size: 1.25rem;
}

/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: 0.5rem 1.3125rem 0.5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
}
</style>